<template>
    <div id="app">

        <view-box body-padding-bottom="0" body-padding-top="46px">
            <x-header class="x-header" :left-options="leftOption" :title="title"><div slot="right" @click="loginOut">{{right}}</div></x-header>
            <router-view></router-view>
            <!--<tabbar style="position: fixed;">
                <tabbar-item :selected="$route.path === '/' " link="/">
                    <span slot="label">首页</span>
                </tabbar-item>
                <tabbar-item link="/novelty" :selected="$route.path == '/novelty' ">
                    <span slot="label">新鲜事</span>
                </tabbar-item>
                <tabbar-item link="/msg" :selected="$route.path == '/msg' ">
                    <span slot="label">消息</span>
                </tabbar-item>
                <tabbar-item link="/my" :selected="$route.path == '/my' ">
                    <span slot="label">我的</span>
                </tabbar-item>
            </tabbar>-->
        </view-box>
    </div>
</template>

<script>
    import {TabbarItem, Tabbar,ViewBox} from "vux";

    export default {
        components: {
            ViewBox,
            Tabbar,
            TabbarItem
        },
        name: 'app',
        computed:{
            title(){
                if(this.$route.path === '/'){
                    return '首页';
                }
                if(this.$route.path === '/member'){
                    if(this.$route.query.type === 'gem'){
                        return '钻石会员' + '共' + this.$route.query.count + '人';
                    }else{
                        return '金币会员' + '共' + this.$route.query.count + '人';
                    }
                }
                if(this.$route.path === '/syRecord'){
                    return '每日收益记录';
                }
                if(this.$route.path === '/erweima'){
                    return '我的二维码';
                }
                if(this.$route.path === '/record'){
                    if(this.$route.query.type === 1){
                        return '金币会员充值记录';
                    }else{
                        return '钻石会员充值记录';
                    }
                }
                if(this.$route.path === '/scoreOut'){
                    return '提现记录';
                }
                if(this.$route.path === '/withdrawalMoney'){
                    return '我要提现';
                }
                if(this.$route.path === '/bindInfo'){
                    return '查询绑定信息';
                }
            },
            right(){
                if(this.$route.path === '/login'){
                    return '';
                }else{
                    return '登出';
                }
            },
            leftOption(){
                if(this.$route.path === '/'){
                    return {
                        showBack: false
                    }
                }else{
                    return {
                        backText: ''
                    }
                }
            }
        },
        methods :{
            loginOut(){
                this.$router.push({
                    name: 'login'
                });
            }
        }
    }
</script>

<style lang="less">
    @import '~vux/src/styles/reset.less';

    #app{
        font-size: 14px;
    }

    .pis-re{position: relative;}
    .pis-ab{position: absolute;}
    .dis-b{display: block;}
    .dis-ib{display: inline-block;}
    .fl{float: left;}
    .fr{float: right;}
    .ovh{overflow: hidden;}
    .txa-c{text-align: center;}
    .txt-hide{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    img{width: 100%;}
    a, input, button{outline: none;}
    input, button{border: none;}
    a{color: inherit;}

    .x-header{
        background: #f2f2f2 !important;
        top: 0;
        left: 0;
        width: 100%;
        position: fixed !important;
        z-index: 100;
    }
    .x-header h1{
        color: #666 !important;
    }

    input::-webkit-input-placeholder{
        font-size: 14px;
        color: #999;
    }

    .panel .weui-media-box__hd{
        width: 40px !important;
        height: 40px !important;
    }
    .panel .weui-media-box{
        padding: 5px 15px;
    }

    .loadMore{
        width: 100%;
        line-height: 40px;
    }
</style>
